<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElImage } from 'element-plus'
import { getProductDetail } from '@/api/product/admin'
import { ProductItem } from '@/api/product/types'
import { ElMessage } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'

// 定义产品详情数据
const productDetails = ref<ProductItem>({
  skuId: 0,
  skuCode: '',
  title: '',
  description: '',
  mainImg: '',
  crossedPrice: 0,
  price: 0,
  sort: 0,
  isShowToUser: 0,
  attrValueList: [],
  createdAt: '',
  updatedAt: ''
} as ProductItem)

const loading = ref(true)
const route = useRoute()
const skuId = route.query.skuId || route.params.skuId
// 获取产品详情
const fetchProductDetail = async () => {
  try {
    loading.value = true
    const res = await getProductDetail(skuId)

    if (res.code === 200) {
      productDetails.value = res.data
    } else {
      ElMessage.error(res.message || '获取产品详情失败')
    }
  } catch (error) {
    ElMessage.error('获取产品详情失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchProductDetail()
})
</script>

<template>
  <ContentWrap title="商品详情" message="展示商品明细信息等">
    <div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="SKU ID">
          {{ productDetails.skuId }}
        </el-descriptions-item>

        <el-descriptions-item label="SKU 编码">
          {{ productDetails.skuCode }}
        </el-descriptions-item>

        <el-descriptions-item label="商品标题">
          {{ productDetails.title }}
        </el-descriptions-item>

        <el-descriptions-item label="主图">
          <ElImage
            v-if="productDetails.mainImg"
            style="width: 100px; height: 100px"
            :src="productDetails.mainImg"
            :preview-src-list="[productDetails.mainImg]"
            preview-teleported
            fit="cover"
          />
        </el-descriptions-item>

        <el-descriptions-item label="划线价格">
          {{ productDetails.crossedPrice }}
        </el-descriptions-item>

        <el-descriptions-item label="实际价格">
          {{ productDetails.price }}
        </el-descriptions-item>

        <el-descriptions-item label="排序">
          {{ productDetails.sort }}
        </el-descriptions-item>

        <el-descriptions-item label="是否展示给用户">
          {{ productDetails.isShowToUser ? '是' : '否' }}
        </el-descriptions-item>

        <el-descriptions-item label="创建时间">
          {{ productDetails.createdAt }}
        </el-descriptions-item>

        <el-descriptions-item label="更新时间">
          {{ productDetails.updatedAt }}
        </el-descriptions-item>

        <el-descriptions-item label="属性列表">
          <el-table
            :data="productDetails.attrValueList"
            style="width: 100%"
            v-if="productDetails.attrValueList && productDetails.attrValueList.length > 0"
          >
            <el-table-column prop="pnValue" label="属性名" />
            <el-table-column prop="pvValue" label="属性值" />
          </el-table>
          <div v-else>无属性信息</div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 商品描述富文本展示 -->
      <div class="mt-20px">
        <div class="text-16px font-bold mb-10px">商品描述</div>
        <div class="p-10px border-1 border-solid border-[#ebeef5] rounded-4px">
          <div v-html="productDetails.description"></div>
        </div>
      </div>
    </div>
  </ContentWrap>
</template>

<style scoped>
:deep(.el-descriptions__body) {
  .el-descriptions__table {
    table-layout: fixed;

    .el-descriptions__label {
      width: 30%; /* label 占据 30% 宽度 */
    }

    .el-descriptions__content {
      width: 70%; /* 内容占据 70% 宽度 */
    }
  }
}

:deep([v-html]) {
  img {
    max-width: 100%;
    height: auto;
  }

  * {
    overflow-wrap: break-word;
  }
}
</style>
